<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">-->
    <!--<link rel="stylesheet" href="css/baguetteBox.min.css">-->
    <!--<link rel="stylesheet" href="css/gallery-clean.css">-->
    <style>
        body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin:0; padding:0
        }
    </style>
</head>
<body>
<ul class="layui-nav">
    <li class="layui-nav-item layui-this"><a href="">首页</a></li>
    <li class="layui-nav-item ">
        <a href="javascript:;">房产信息</a>
        <dl class="layui-nav-child">
            <dd><a href="">选项1</a></dd>
            <dd><a href="">选项2</a></dd>
            <dd><a href="">选项3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">人员管理</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">房屋管理</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">后台管理</a></li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>
<div class="htmleaf-container" style="margin-top: 100px">
    <div class="container gallery-container">
        <div class="tz-gallery">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/park.jpg">
                            <img src="/img/bg.jpg" alt="Park">
                        </a>
                        <div class="caption">
                            <h3>区</h3>
                            <p>区是会意字，根据隶定字形解释。字从品，从匚（ fāng）。“品”意为“三口”、“众口”，引申为“食物”。</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/bridge.jpg">
                            <img src="/img/bg.jpg" alt="Bridge">
                        </a>
                        <div class="caption">
                            <h3>区政府</h3>
                            <p>区政府的意思是这一片地区的头头，所有地方都得归他管</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/tunnel.jpg">
                            <img src="/img/bg.jpg" alt="Tuneel">
                        </a>
                        <div class="caption">
                            <h3>区诊所</h3>
                            <p>区诊所的意思是这一片地区的医疗头头，所有病都得归他管</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/coast.jpg">
                            <img src="/img/bg.jpg" alt="Coast">
                        </a>
                        <div class="caption">
                            <h3>区水利局</h3>
                            <p>区水利局的意思是这一片地区的输水头头，所有地方的送水都得归他管</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/rails.jpg">
                            <img src="/img/bg.jpg" alt="Rails">
                        </a>
                        <div class="caption">
                            <h3>区政府</h3>
                            <p>区政府的意思是这一片地区的头头，所有地方都得归他管</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="images/traffic.jpg">
                            <img src="/img/bg.jpg" alt="Traffic">
                        </a>
                        <div class="caption">
                            <h3>区法院</h3>
                            <p>区法院的意思是这一片地区的头头，所有民事纠纷都得归他管</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<div id="demo7" style="margin: 0 auto; width: 50%;display: block;text-align: center"></div>
<script type="text/javascript" src="js/baguetteBox.min.js"></script>
<script type="text/javascript">
    baguetteBox.run('.tz-gallery');
</script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;
        laypage.render({
            elem: 'demo7'
            , count: 100
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                console.log(obj)
            }
        });
    });
</script>
</body>
</html>